<template>
  <div class="todo-filter">
    <div class="filters">
      <button v-for="f in filters" :key="f" :class="{ active: f === modelValue }"
        @click="$emit('update:modelValue', f)">
        {{ f }}
      </button>
    </div>
    <div class="user-info">
      <span>{{ user }}</span>
      <button @click="handleLogout">退出</button>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: String,
  user: { type: String, required: true }
})

const emit = defineEmits<{
  'update:modelValue': [val: string]
  logout: []
}>()

const filters = ['全部', '已完成', '未完成']

/* 退出前的确认 */
function handleLogout() {
  const ok = confirm('确定要退出吗？')
  if (ok) {
    emit('logout')
  }
  // 点“取消”什么都不做，相当于“再思考一下”
}
</script>

<style scoped src="@/assets/TodoFilter.css"></style>

